.alert-banner {
    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $vertical-spacing * 0.5 1rem; // match header spacing
        color: $blue-100;
        font-size: 0.9rem;
        background-color: $amber;
        &:hover {
            background-color: $amber-110;
        }

        @include md-up {
            display: block;
            text-align: center;
        }

        .text {
            display: inline;
            margin-right: 1rem;

            a {
                color: inherit;
                font-weight: bold;
                &:hover {
                    color: #2162e6;
                }
            }
        }

        > a {
            white-space: nowrap;
            font-size: 0.8rem;
            display: inline-block;
            padding: 0.2rem 0.5rem;
            color: $white;
            background-color: $oxford-blue;
            &:hover {
                background-color: $blue-90;
            }
            transition: background-color 200ms;
            border-radius: 3px;
        }
    }
}
